<script setup>
import { getHomeOthertab } from '../api/home';
import { ref, onMounted } from 'vue';

// const props = defineProps(['id1','type1']);
// let id = props.id1;
// let type = props.type1;

// console.log("推荐=",id,type)

let recommentList = ref([]);
// 首页推荐轮播图
let recommentBanner = ref([]);
// 首页推荐的Btn
let recommentBtn = ref([]);
// 首页推荐box1
let box1List = ref([]);

let box3List = ref([]);

let laptopList = ref([]);

let box10List = ref([]);

// let box11List = ref([]);

let getHomeOthertabFun = () => {
    getHomeOthertab({
        page_type: 'home',
        page_id: 0
    }).then(res => {
        // console.log("推荐的数据=>",res);
        recommentList.value = res.data.data.data.sections;
        console.log("recommentList=", recommentList.value);
        // 首页推荐轮播图
        recommentBanner.value = res.data.data.data.sections[0].body.items;
        // 首页推荐的Btn
        recommentBtn.value = res.data.data.data.sections[1].body.items.concat(res.data.data.data.sections[2].body.items);
        
        box1List.value = res.data.data.data.sections[4].body.items
        
        box3List.value = res.data.data.data.sections[8].body.items.concat( res.data.data.data.sections[10].body.items,res.data.data.data.sections[12].body.items,res.data.data.data.sections[14].body.items )
        
        laptopList.value = res.data.data.data.sections[24].body.items.concat( res.data.data.data.sections[26].body.items)

        box10List.value = res.data.data.data.sections[35].body.items.concat( res.data.data.data.sections[37].body.items,res.data.data.data.sections[39].body.items )


    })
}

onMounted(() => {
    getHomeOthertabFun()
})


</script>

<template>
    <van-loading type="spinner" color="#ff6900" v-if="!recommentList" vertical/>
    <div class="recommend" v-else>
        <!-- 首页轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
            <van-swipe-item v-for="(item, index) in recommentBanner" :key="index">
                <img :src="'https:' + item.img_url" alt="banner">
            </van-swipe-item>
        </van-swipe>

        <!-- 首页Btn -->
        <div class="recommend-btn">
            <ul>
                <li v-for="(item, index) in recommentBtn" :key="index">
                    <img :src="'https:' + item.img_url" alt="banner">
                </li>
            </ul>
        </div>
        <!-- 首页推荐第三部分 -->
        <div class="recommend-box1">
            <div class="box1-left" v-if="box1List[0]">
                <img :src="'https:' + box1List[0].img_url">
            </div>
            <div class="box1-right" v-if="box1List[1] && box1List[2]">
                <img :src="'https:' + box1List[1].img_url">
                <img :src="'https:' + box1List[2].img_url">
            </div>
        </div>
        <!-- 首页推荐第四部分 -->
        <div class="recommend-box2" v-if="recommentList[6]">
            <img :src="recommentList[6].body.items[0].img_url" alt="" srcset="">
        </div>
        <!-- 首页推荐第五部分 -->
        <div class="recommend-box3">
            <div class="box3-item" v-for="(item,index) in box3List" :key="index">
                <img :src="'https:' + item.img_url" alt="">
                <p class="product-name">{{item.product_name}}</p>
                <p class="product-brief">{{item.product_brief}}</p>
                <p class="show-price">￥{{item.show_price}} <span> 起 </span> </p>
                <button>立即购买</button>
            </div>
            <div class="box3-bottom" v-if="recommentList[16]">
                <p>{{ recommentList[16].body.items[0].action_title }} <span class="iconfont icon-xiangyoujiantou"></span> </p>

            </div>
        </div>
        <!-- 首页推荐第六部分 -->
        <div class="recommend-box4" v-if="recommentList[18]">
            <img :src="recommentList[18].body.items[0].img_url" alt="" srcset="">
            <div class="box4-bottom" v-if="recommentList[20]">
                <p>{{ recommentList[20].body.items[0].action_title }} <span class="iconfont icon-xiangyoujiantou"></span> </p>
            </div>
        </div>

        <!-- 小米笔记本 -->
        <div class="recommend-baptop" v-if="recommentList[22]">
            <img :src="recommentList[22].body.items[0].img_url" alt="" srcset="">

            <div class="baptop">
            <div class="baptop-item" v-for="(item,index) in laptopList" :key="index">
                <img :src="'https:' + item.img_url" alt="">
                <p class="product-name">{{item.product_name}}</p>
                <p class="product-brief">{{item.product_brief}}</p>
                <p class="show-price">￥{{item.show_price}} <span> 起 </span> </p>
                <button>立即购买</button>
            </div>
            <div class="baptop-bottom" v-if="recommentList[28]">
                <p>{{ recommentList[28].body.items[0].action_title }} <span class="iconfont icon-xiangyoujiantou"></span> </p>

            </div>
            </div>

        </div>

        <!-- 米家智能 -->
        <div class="recommend-intelligent" v-if="recommentList[30]&&recommentList[31]">
            <img :src="recommentList[30].body.items[0].img_url" alt="">
            <p>{{ recommentList[31].body.items[0].action_title }} <span class="iconfont icon-xiangyoujiantou"></span> </p>
        </div>

        <!-- 更多米家智能产品 -->
        <div class="recommend-more-intelligent" v-if="recommentList[33]">
            <p> {{recommentList[33].body.items[0].action_title}} <span class="iconfont icon-xiangyoujiantou"></span> </p>
        </div>
<!-- 首页推荐第十部分 -->
        <div class="recommend-box10">
            <div class="box10-item" v-for="(item,index) in box10List" :key="index">
                <img :src="'https:'+item.img_url" alt="">
            </div>

        </div>
<!-- 小米以旧换新 -->
        <div class="recomment-old-new" v-if="recommentList[41]">
            <img :src="recommentList[41].body.items[0].img_url" alt="">
        </div>
        <!-- 了解小米 -->
        <div class="recomment-understand" v-if="recommentList[42]">
            <img :src="'https:'+recommentList[42].body.items[0].img_url" alt="">
        </div>
        


    </div>
</template>

<style lang="scss">
.my-swipe .van-swipe-item {
    height: 200px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}

.van-swipe-item>img {
    width: 100%;
    height: 100%;
}

.recommend {
    width: 100%;
    // height: 5000px;
    background-color: #f2f2f2;

    .recommend-btn {
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;

            li {
                width: 20%;
                height: 80px;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .recommend-box1 {
        width: 100%;
        height: 264px;
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        background-color: #fff;

        .box1-left {
            width: 50%;
            height: 100%;
            margin-right: 3px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .box1-right {
            width: 50%;
            height: 100%;

            img {
                width: 100%;
                height: 50%;
                margin-bottom: 2px;
            }
        }
    }

    .recommend-box2 {
        width: 100%;
        height: 234px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .recommend-box3,.baptop{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        box-sizing: border-box;
        padding-left: 6px;
        padding-right: 6px;
        background-color: #fff;

        .box3-item,.baptop-item{
            width: 49%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                width: 100%;
                height: 146px;
            }

            .product-name {
                // text-align: center;
                font-size: 15px;
                margin-top: 13px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            .product-brief {
                font-size: 11px;
                width: 150px;
                margin: 8px 0px;
                color: #757575;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
            .show-price{
                color: #ea625b;
            }
            button{
                width: 105px;
                height: 32px;
                margin: 5px 0px 15px 0px;
                line-height: 30px;
                border-radius: 3px;
                background-color: #ea625b;
                color: #fff;
                text-align: center;
                outline: none;
                border: none;
                
            }
        }
        .box3-bottom{
            width: 100%;
            height: 55px;
            text-align: center;
            line-height: 55px;
            border-top: 2px solid #cecece;
        }
    }
    .recommend-box4{
        width: 100%;
        
        margin: 10px 0px;
        img{
            width: 100%;
            height: 229px;
        }
        .box4-bottom{
            width: 100%;
            height: 55px;
            background-color: #fff;
            text-align: center;
            line-height: 55px;
        }
    }
    .recommend-baptop{
        width: 100%;
        margin: 10px 0px;
        img{
            width: 100%;
            height: 230px;
        }
        .baptop-bottom{
            width: 100%;
            height: 55px;
            background-color: #fff;
            text-align: center;
            line-height: 55px;
        }
    }
    .recommend-intelligent,.recommend-more-intelligent{
        width: 100%;
        margin-bottom: 10px;
        img{
            width: 100%;
            height: 230px;
        }
        p{
            width: 100%;
            height: 53px;
            background-color: #fff;
            text-align: center;
            line-height: 53px;
        }
    }
    .recommend-box10{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .box10-item{
            width: 49%;
            height: 250px;
            margin-bottom: 5px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .recomment-old-new{
        width: 100%;
        height: 144px;
        margin: 5px 0px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .recomment-understand{
        width: 100%;
        height: 53px;
        img{
            width: 100%;
            height: 100%;
        }
    }

}
</style>